<template>
  <div class="paper-question-manager">
    <div class="module-header" v-if="editable">

    </div>
    
    <!-- 题目列表 -->
    <div class="question-list">
      <!-- 全选功能 -->
      <div v-if="editable && showBatchDelete" class="select-all-container">
        <el-checkbox 
          :model-value="isAllSelected" 
          @change="toggleSelectAll"
          class="select-all-checkbox"
        >
          全选
        </el-checkbox>
      </div>
      <el-card 
        v-for="question in questions" 
        :key="question.id" 
        class="question-card"
        shadow="hover"
      >
        <div class="question-content">
          <div class="question-header">
            <el-checkbox 
              v-if="editable && showBatchDelete" 
              :model-value="selectedQuestions.includes(question.id)" 
              @change="(val: any) => toggleQuestionSelection(question.id, val)"
              class="question-checkbox"
            />
            <div class="question-info">
              <span class="question-id">ID: {{ question.id }}</span>
              <span class="question-type">{{ getQuestionTypeText(question.type) }}</span>
            </div>
          </div>
          <div class="question-text" v-html="processQuestionContent(question.content)"></div>
          <!-- 显示选项 -->
          <div v-if="question.options && question.options.length > 0" class="question-options">
            <div 
              v-for="(option, index) in question.options" 
              :key="index" 
              class="question-option"
              v-html="processOptionContent(getOptionText(option, index))"
            >
            </div>
          </div>
        </div>
        <div class="question-actions" v-if="editable">
          <el-button type="primary" size="small" @click="editQuestion(question)">编辑</el-button>
          <el-button type="danger" size="small" @click="removeQuestion(question.id)">删除</el-button>
        </div>
      </el-card>
      
      <!-- 无题目提示 -->
      <el-empty v-if="questions.length === 0" description="暂无题目，请添加题目" />
    </div>
    
    <!-- 添加/编辑题目对话框 -->
    <el-dialog v-model="showQuestionDialog" :title="editingQuestion ? '编辑题目' : '添加题目'" width="800px" v-if="editable">
      <el-form :model="questionForm" :rules="questionRules" ref="questionFormRef" label-width="100px">
        <el-form-item label="题目类型" prop="type">
          <el-select v-model="questionForm.type" placeholder="请选择题目类型" @change="onQuestionTypeChange">
            <el-option label="单选题" value="single_choice" />
            <el-option label="多选题" value="multiple_choice" />
            <el-option label="判断题" value="true_false" />
            <el-option label="填空题" value="fill_blank" />
            <el-option label="简答题" value="shortAnswer" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="题目内容" prop="content">
          <!-- 使用富文本编辑器替换原来的 el-input -->
          <div style="border: 1px solid #ccc; z-index: 1000">
            <div ref="editorToolbarRef" style="border-bottom: 1px solid #ccc;"></div>
            <div ref="editorContentRef" style="height: 300px; overflow-y: hidden;"></div>
          </div>
        </el-form-item>
        
        <!-- 选项部分（单选、多选） -->
        <div v-if="questionForm.type === 'single_choice' || questionForm.type === 'multiple_choice'">
          <el-form-item 
            v-for="(option, index) in questionForm.options" 
            :key="index"
            :label="'选项' + String.fromCharCode(65 + index)"
            :prop="'options.' + index"
          >
            <!-- 为选项内容使用富文本编辑器 -->
            <div style="border: 1px solid #ccc; z-index: 1000">
              <div :ref="(el) => setOptionToolbarRef(el, index)" style="border-bottom: 1px solid #ccc;"></div>
              <div :ref="(el) => setOptionContentRef(el, index)" style="height: 100px; overflow-y: hidden;"></div>
            </div>
            <el-button 
              v-if="questionForm.type === 'multiple_choice' && questionForm.options.length > 2" 
              @click="removeOption(index)" 
              type="danger" 
              size="small" 
              style="margin-left: 10px; margin-top: 10px;"
            >
              删除
            </el-button>
          </el-form-item>
          
          <el-form-item v-if="questionForm.type === 'multiple_choice'">
            <el-button @click="addOption" type="primary" size="small">
              <el-icon><Plus /></el-icon> 添加选项
            </el-button>
          </el-form-item>
          
          <el-form-item 
            v-if="questionForm.type === 'single_choice'" 
            label="正确答案" 
            prop="correctAnswer"
          >
            <el-radio-group v-model="questionForm.correctAnswer">
              <el-radio 
                v-for="(option, index) in questionForm.options" 
                :key="index" 
                :label="String.fromCharCode(65 + index)"
              >
                {{ String.fromCharCode(65 + index) }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item 
            v-else-if="questionForm.type === 'multiple_choice'" 
            label="正确答案" 
            prop="correctAnswers"
          >
            <el-checkbox-group v-model="questionForm.correctAnswers">
              <el-checkbox 
                v-for="(option, index) in questionForm.options" 
                :key="index" 
                :label="String.fromCharCode(65 + index)"
              >
                {{ String.fromCharCode(65 + index) }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        
        <!-- 判断题答案 -->
        <el-form-item v-else-if="questionForm.type === 'true_false'" label="正确答案" prop="correctAnswer">
          <el-radio-group v-model="questionForm.correctAnswer">
            <el-radio label="true">正确</el-radio>
            <el-radio label="false">错误</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <!-- 填空题答案 -->
        <el-form-item v-else-if="questionForm.type === 'fill_blank'" label="正确答案" prop="correctAnswer">
          <el-input v-model="questionForm.correctAnswer" placeholder="请输入正确答案" />
        </el-form-item>
        
        <!-- 简答题答案 -->
        <el-form-item v-else-if="questionForm.type === 'shortAnswer'" label="参考答案" prop="correctAnswer">
          <el-input 
            v-model="questionForm.correctAnswer" 
            type="textarea" 
            :rows="4" 
            placeholder="请输入参考答案"
          />
        </el-form-item>
        
        <!-- 题目解析 -->
        <el-form-item label="题目解析">
          <!-- 使用富文本编辑器替换原来的 el-input -->
          <div style="border: 1px solid #ccc; z-index: 1000">
            <div ref="analysisEditorToolbarRef" style="border-bottom: 1px solid #ccc;"></div>
            <div ref="analysisEditorContentRef" style="height: 200px; overflow-y: hidden;"></div>
          </div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showQuestionDialog = false">取消</el-button>
          <el-button type="primary" @click="saveQuestion">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import * as paperApi from '@/api/paper'
// 引入 wangEditor
import { createEditor, createToolbar } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
import { getEditorConfig, getToolbarConfig, getOptionEditorConfig, getOptionToolbarConfig } from '@/utils/editorUtils'
import { modifyQuestionContentImageSizeInHTML, modifyOptionImageSizeInHTML } from '@/utils/htmlUtils'
import type { IDomEditor } from '@wangeditor/editor'

// 定义组件属性
const props = defineProps<{
  questions: any[],
  paperId: Number,
  editable?: Boolean,
  showBatchDelete?: Boolean,
  selectedQuestions?: number[],
  showAddQuestionDialog?: Boolean  // 新增属性，用于外部触发添加题目对话框
}>()

// 设置默认值
const editable = computed(() => props.editable !== false)
const showBatchDelete = computed(() => props.showBatchDelete !== false)
const selectedQuestions = computed(() => Array.isArray(props.selectedQuestions) ? props.selectedQuestions : [])
const showAddQuestionDialog = computed(() => props.showAddQuestionDialog === true)  // 新增属性的默认值

// 定义事件发射
const emit = defineEmits<{
  (e: 'add-question', question: any): Promise<any>
  (e: 'remove-question', questionId: number): void
  (e: 'update-question', question: any): Promise<any>
  (e: 'questions-updated'): void // 添加题目更新事件
  (e: 'toggle-question-selection', questionId: number, selected: boolean): void
  (e: 'toggle-select-all', selected: boolean): void
}>()

// 计算是否全选
const isAllSelected = computed(() => {
  return props.questions.length > 0 && props.questions.every(question => 
    selectedQuestions.value.includes(question.id)
  );
});

// 全选/取消全选
const toggleSelectAll = (selected: boolean) => {
  emit('toggle-select-all', selected);
};

// 题目表单数据
const questionForm = reactive({
  id: 0,
  type: 'single_choice',
  content: '',
  options: [
    { content: '' },
    { content: '' },
    { content: '' },
    { content: '' }
  ],
  correctAnswer: '',
  correctAnswers: [] as string[],
  analysis: ''
})

// 题目表单验证规则
const questionRules = {
  type: [{ required: true, message: '请选择题目类型', trigger: 'change' }],
  content: [{ required: true, message: '请输入题目内容', trigger: 'blur' }],
  correctAnswer: [{ required: true, message: '请选择/输入正确答案', trigger: 'blur' }]
}

// 对话框控制
const showQuestionDialog = ref(false)
const editingQuestion = ref(false)

// 表单引用
const questionFormRef = ref()

// wangEditor 实例引用
const editorRef = ref<IDomEditor | null>(null)
const editorToolbarRef = ref()
const editorContentRef = ref()

// 选项编辑器实例引用数组
const optionEditorsRef = ref<IDomEditor[]>([])
const optionToolbarRefs = ref<any[]>([])
const optionContentRefs = ref<any[]>([])

// 解析编辑器实例引用
const analysisEditorRef = ref<IDomEditor | null>(null)
const analysisEditorToolbarRef = ref()
const analysisEditorContentRef = ref()

// 获取题目类型文本
const getQuestionTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    single_choice: '单选题',
    multiple_choice: '多选题',
    true_false: '判断题',
    fill_blank: '填空题',
    shortAnswer: '简答题',
    // 兼容旧的题型值
    single: '单选题',
    multiple: '多选题',
    trueFalse: '判断题',
    fillBlank: '填空题',
    // 可能的其他后端题型值
    singleChoice: '单选题',
    multipleChoice: '多选题',
    trueFalseQuestion: '判断题',
    fillBlankQuestion: '填空题'
  }
  return typeMap[type] || '未知题型'
}

// 添加选项
const addOption = () => {
  // 单选题不能添加选项
  if (questionForm.type === 'single_choice') {
    ElMessage.warning('单选题不能添加选项');
    return;
  }
  questionForm.options.push({ content: '' });
}

// 删除选项
const removeOption = (index: number) => {
  // 单选题不能删除选项
  if (questionForm.type === 'single_choice') {
    ElMessage.warning('单选题选项不能删除');
    return;
  }
  
  if (questionForm.options.length <= 2) {
    ElMessage.warning('至少需要两个选项');
    return;
  }
  questionForm.options.splice(index, 1);
  
  // 更新正确答案
  if (questionForm.type === 'single_choice' && questionForm.correctAnswer) {
    const answerIndex = String.fromCharCode(65 + index);
    if (questionForm.correctAnswer === answerIndex) {
      questionForm.correctAnswer = '';
    }
  } else if (questionForm.type === 'multiple_choice' && questionForm.correctAnswers.length > 0) {
    const answerIndex = String.fromCharCode(65 + index);
    const answerIndexPos = questionForm.correctAnswers.indexOf(answerIndex);
    if (answerIndexPos !== -1) {
      questionForm.correctAnswers.splice(answerIndexPos, 1);
    }
  }
  
  // 销毁对应的选项编辑器
  if (optionEditorsRef.value[index]) {
    try {
      optionEditorsRef.value[index].destroy();
    } catch (error) {
      console.error('销毁选项编辑器失败:', error);
    }
  }
  
  // 移除编辑器引用
  optionEditorsRef.value.splice(index, 1);
  optionToolbarRefs.value.splice(index, 1);
  optionContentRefs.value.splice(index, 1);
}

// 题目类型变更处理
const onQuestionTypeChange = () => {
  // 重置选项和答案
  if (questionForm.type === 'single_choice') {
    // 单选题固定四个选项
    questionForm.options = [
      { content: '' },
      { content: '' },
      { content: '' },
      { content: '' }
    ];
  } else {
    // 其他题型默认四个选项
    questionForm.options = [
      { content: '' },
      { content: '' },
      { content: '' },
      { content: '' }
    ];
  }
  questionForm.correctAnswer = '';
  questionForm.correctAnswers = [];
}

// 编辑题目
const editQuestion = (question: any) => {
  questionForm.id = question.id
  questionForm.type = question.type
  questionForm.content = question.content
  
  // 确保单选题有四个选项
  if (question.type === 'single_choice') {
    // 单选题固定四个选项
    questionForm.options = [
      { content: '' },
      { content: '' },
      { content: '' },
      { content: '' }
    ];
    // 如果原题有选项，则填充到固定选项中
    if (question.options && question.options.length > 0) {
      for (let i = 0; i < Math.min(question.options.length, 4); i++) {
        questionForm.options[i].content = question.options[i].content || '';
      }
    }
  } else {
    // 其他题型保持原有选项
    questionForm.options = question.options || [
      { content: '' },
      { content: '' },
      { content: '' },
      { content: '' }
    ];
  }
  
  questionForm.correctAnswer = question.correctAnswer || ''
  questionForm.correctAnswers = question.correctAnswers || []
  questionForm.analysis = question.analysis || ''
  editingQuestion.value = true
  showQuestionDialog.value = true
}

// 删除题目
const removeQuestion = (questionId: number) => {
  emit('remove-question', questionId)
}

// 保存题目
const saveQuestion = async () => {
  // 如果不可编辑，直接返回
  if (!props.editable) {
    showQuestionDialog.value = false;
    return;
  }
  
  if (!questionFormRef.value) return
  
  await questionFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        // 从富文本编辑器获取内容
        if (editorRef.value) {
          questionForm.content = editorRef.value.getHtml()
        }
        
        // 从选项编辑器获取内容
        for (let i = 0; i < optionEditorsRef.value.length; i++) {
          if (optionEditorsRef.value[i]) {
            questionForm.options[i].content = optionEditorsRef.value[i].getHtml()
          }
        }
        
        // 从解析编辑器获取内容
        if (analysisEditorRef.value) {
          questionForm.analysis = analysisEditorRef.value.getHtml()
        }
        
        // 构造题目对象
        const questionData = {
          tempId: questionForm.id || Date.now(), // 添加临时ID用于跟踪
          id: questionForm.id || undefined,
          type: questionForm.type,
          content: questionForm.content,
          options: questionForm.type === 'single_choice' ? questionForm.options : questionForm.options.filter(option => option.content.trim() !== ''),
          correctAnswer: questionForm.correctAnswer,
          correctAnswers: questionForm.correctAnswers,
          analysis: questionForm.analysis
        };
        
        if (editingQuestion.value) {
          // 编辑题目逻辑
          await emit('update-question', questionData);
          ElMessage.success('题目更新成功');
        } else {
          // 添加题目逻辑
          await emit('add-question', questionData);
          ElMessage.success('题目添加成功');
        }
        
        // 发送题目更新事件
        emit('questions-updated');
        
        showQuestionDialog.value = false;
        resetQuestionForm();
      } catch (error) {
        console.error('操作失败:', error);
        ElMessage.error('操作失败');
      }
    }
  });
}

// 切换题目选择状态
const toggleQuestionSelection = (questionId: number, selected: boolean) => {
  emit('toggle-question-selection', questionId, selected);
}

// 重置题目表单
const resetQuestionForm = () => {
  questionForm.id = 0
  questionForm.type = 'single_choice'
  questionForm.content = ''
  // 单选题固定四个选项
  questionForm.options = [
    { content: '' },
    { content: '' },
    { content: '' },
    { content: '' }
  ]
  questionForm.correctAnswer = ''
  questionForm.correctAnswers = []
  questionForm.analysis = ''
  editingQuestion.value = false
  
  // 重置富文本编辑器内容
  if (editorRef.value) {
    editorRef.value.clear()
  }
  
  // 重置选项编辑器内容
  optionEditorsRef.value.forEach(editor => {
    if (editor) {
      editor.clear()
    }
  })
  
  // 重置解析编辑器内容
  if (analysisEditorRef.value) {
    analysisEditorRef.value.clear()
  }
}

// 设置选项工具栏引用
const setOptionToolbarRef = (el: any, index: number) => {
  if (el) {
    optionToolbarRefs.value[index] = el
  }
}

// 设置选项内容引用
const setOptionContentRef = (el: any, index: number) => {
  if (el) {
    optionContentRefs.value[index] = el
  }
}

// 监听showAddQuestionDialog属性变化，用于外部触发添加题目对话框
watch(showAddQuestionDialog, (newVal) => {
  if (newVal && editable.value) {
    showQuestionDialog.value = true;
    editingQuestion.value = false;
    resetQuestionForm();
  }
});

// 监听对话框显示状态变化，创建或销毁编辑器
watch(showQuestionDialog, (newVal) => {
  if (newVal) {
    // 延迟创建编辑器，确保DOM已渲染
    setTimeout(() => {
      // 创建主编辑器
      if (editorToolbarRef.value && editorContentRef.value) {
        // 如果编辑器已存在，先销毁
        if (editorRef.value) {
          try {
            editorRef.value.destroy()
          } catch (error) {
            console.error('销毁编辑器失败:', error)
          }
        }
        
        // 创建编辑器，传递模块名称"试卷管理"
        const editorConfig = getEditorConfig('请输入题目内容...', '试卷管理')
        editorConfig.onChange = (editor: IDomEditor) => {
          // 当编辑器选区、内容变化时，更新到 questionForm.content
          // 注意：这里我们不直接更新 questionForm.content，而是在保存时获取
        }
        
        const editor = createEditor({
          selector: editorContentRef.value,
          config: editorConfig,
          html: questionForm.content || ''
        })
        
        // 创建工具栏
        const toolbarConfig = getToolbarConfig()
        createToolbar({
          editor,
          selector: editorToolbarRef.value,
          config: toolbarConfig
        })
        
        editorRef.value = editor
      }
      
      // 创建选项编辑器
      for (let i = 0; i < optionToolbarRefs.value.length; i++) {
        if (optionToolbarRefs.value[i] && optionContentRefs.value[i]) {
          // 如果编辑器已存在，先销毁
          if (optionEditorsRef.value[i]) {
            try {
              optionEditorsRef.value[i].destroy()
            } catch (error) {
              console.error('销毁选项编辑器失败:', error)
            }
          }
          
          // 创建选项编辑器，传递模块名称"试卷管理"
          const optionEditorConfig = getOptionEditorConfig('请输入选项内容...', '试卷管理')
          optionEditorConfig.onChange = (editor: IDomEditor) => {
            // 当编辑器选区、内容变化时，更新到 questionForm.options[i].content
            // 注意：这里我们不直接更新，而是在保存时获取
          }
          
          const optionEditor = createEditor({
            selector: optionContentRefs.value[i],
            config: optionEditorConfig,
            html: questionForm.options[i]?.content || ''
          })
          
          // 创建工具栏
          const optionToolbarConfig = getOptionToolbarConfig()
          createToolbar({
            editor: optionEditor,
            selector: optionToolbarRefs.value[i],
            config: optionToolbarConfig
          })
          
          // 存储编辑器引用
          optionEditorsRef.value[i] = optionEditor
        }
      }
      
      // 创建解析编辑器
      if (analysisEditorToolbarRef.value && analysisEditorContentRef.value) {
        // 如果编辑器已存在，先销毁
        if (analysisEditorRef.value) {
          try {
            analysisEditorRef.value.destroy()
          } catch (error) {
            console.error('销毁解析编辑器失败:', error)
          }
        }
        
        // 创建解析编辑器，传递模块名称"试卷管理"
        const analysisEditorConfig = getEditorConfig('请输入题目解析...', '试卷管理')
        analysisEditorConfig.onChange = (editor: IDomEditor) => {
          // 当编辑器选区、内容变化时，更新到 questionForm.analysis
          // 注意：这里我们不直接更新，而是在保存时获取
        }
        
        const analysisEditor = createEditor({
          selector: analysisEditorContentRef.value,
          config: analysisEditorConfig,
          html: questionForm.analysis || ''
        })
        
        // 创建工具栏
        const analysisToolbarConfig = getToolbarConfig()
        createToolbar({
          editor: analysisEditor,
          selector: analysisEditorToolbarRef.value,
          config: analysisToolbarConfig
        })
        
        analysisEditorRef.value = analysisEditor
      }
    }, 100)
  } else {
    // 销毁所有编辑器
    if (editorRef.value) {
      try {
        editorRef.value.destroy()
        editorRef.value = null
      } catch (error) {
        console.error('销毁编辑器失败:', error)
      }
    }
    
    // 销毁选项编辑器
    optionEditorsRef.value.forEach(editor => {
      if (editor) {
        try {
          editor.destroy()
        } catch (error) {
          console.error('销毁选项编辑器失败:', error)
        }
      }
    })
    optionEditorsRef.value = []
    optionToolbarRefs.value = []
    optionContentRefs.value = []
    
    // 销毁解析编辑器
    if (analysisEditorRef.value) {
      try {
        analysisEditorRef.value.destroy()
        analysisEditorRef.value = null
      } catch (error) {
        console.error('销毁解析编辑器失败:', error)
      }
    }
  }
})

// 组件卸载前销毁编辑器
onBeforeUnmount(() => {
  if (editorRef.value) {
    try {
      editorRef.value.destroy()
    } catch (error) {
      console.error('销毁编辑器失败:', error)
    }
    editorRef.value = null
  }
  
  // 销毁选项编辑器
  optionEditorsRef.value.forEach(editor => {
    if (editor) {
      try {
        editor.destroy()
      } catch (error) {
        console.error('销毁选项编辑器失败:', error)
      }
    }
  })
  optionEditorsRef.value = []
  
  // 销毁解析编辑器
  if (analysisEditorRef.value) {
    try {
      analysisEditorRef.value.destroy()
    } catch (error) {
      console.error('销毁解析编辑器失败:', error)
    }
    analysisEditorRef.value = null
  }
})

// 监听题目内容变化，更新编辑器内容（用于编辑题目时）
watch(() => questionForm.content, (newVal) => {
  if (editorRef.value && showQuestionDialog.value && editingQuestion.value) {
    // 只在编辑模式下更新编辑器内容
    editorRef.value.setHtml(newVal || '')
  }
})

// 监听选项内容变化，更新选项编辑器内容（用于编辑题目时）
watch(() => questionForm.options, (newOptions) => {
  if (showQuestionDialog.value && editingQuestion.value) {
    // 更新每个选项的编辑器内容
    newOptions.forEach((option, index) => {
      if (optionEditorsRef.value[index] && option.content !== undefined) {
        optionEditorsRef.value[index].setHtml(option.content || '')
      }
    })
  }
}, { deep: true })

// 监听解析内容变化，更新解析编辑器内容（用于编辑题目时）
watch(() => questionForm.analysis, (newVal) => {
  if (analysisEditorRef.value && showQuestionDialog.value && editingQuestion.value) {
    // 只在编辑模式下更新解析编辑器内容
    analysisEditorRef.value.setHtml(newVal || '')
  }
})

// 处理题目内容，应用图片尺寸设置
const processQuestionContent = (content: string) => {
  return modifyQuestionContentImageSizeInHTML(content);
};

// 处理选项内容，应用图片尺寸设置
const processOptionContent = (content: string) => {
  return modifyOptionImageSizeInHTML(content);
};

// 获取选项文本（支持富文本）
const getOptionText = (option: any, index: number) => {
  // 如果选项内容是对象且有content属性，使用content属性
  if (option && typeof option === 'object' && option.content) {
    return `${String.fromCharCode(65 + index)}. ${option.content}`;
  }
  // 如果选项是字符串，直接使用
  if (typeof option === 'string') {
    return `${String.fromCharCode(65 + index)}. ${option}`;
  }
  // 默认情况
  return `${String.fromCharCode(65 + index)}. ${option || ''}`;
};

</script>

<style scoped>
.paper-question-manager {
  padding: 0;
}

.module-header {
  margin-bottom: 0;
}

.select-all-container {
  padding: 8px 12px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #f5f7fa;
}

.select-all-checkbox {
  font-weight: bold;
  color: #606266;
}

.question-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.question-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin: 0;
}

.question-content {
  padding: 12px;
}

.question-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.question-checkbox {
  margin-right: 8px;
}

.question-info {
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-bottom: 0;
}

.question-id {
  font-size: 12px;
  color: #999;
}

.question-type {
  font-size: 12px;
  color: #409eff;
  background-color: #ecf5ff;
  padding: 2px 6px;
  border-radius: 4px;
}

.question-text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.question-options {
  margin-top: 8px;
  padding-left: 16px;
}

.question-option {
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
}

.question-actions {
  padding: 12px;
  border-top: 1px solid #ebeef5;
  text-align: right;
}

.dialog-footer {
  text-align: right;
}
</style>